<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS 揭秘 第4章</title>
  <link rel="stylesheet" href="css-secrets-4.css">
</head>
<body>
  <h2>15.单侧投影</h2>
  <div class="example-15">
    <div class="single">
      单侧投影
    </div>
    <div class="adjacent">
      邻边投影
    </div>
    <div class="subtense">
      对边投影
    </div>
  </div>

  <h2>16.不规则投影</h2>
  <div class="example-16">
    使用 filter: drop-shadow();
  </div>

  <h2>17.染色效果</h2>
  <div class="example-17">
    <div class="filter">
      基于滤镜方案
      <img src="http://4.bp.blogspot.com/-NvvzyVPg7qY/VFcRN9A342I/AAAAAAAAA5o/fXAblGcldbM/s1600/6%E8%80%81%E8%99%8E%2B%E6%94%9D%E7%90%86.jpg" alt="tiger">
    </div>
    <div class="mix">
      混合模式，整个元素 mix-blend-mode
      <img src="http://4.bp.blogspot.com/-NvvzyVPg7qY/VFcRN9A342I/AAAAAAAAA5o/fXAblGcldbM/s1600/6%E8%80%81%E8%99%8E%2B%E6%94%9D%E7%90%86.jpg" alt="tiger">
    </div>
    <div class="bg-mix">
      混合模式，对背景设置 background-blend-mode
    </div>
  </div>

  <h2>18.毛玻璃效果</h2>
  <div class="example-18">
    <blockquote>
      <div>我是引用，采用 blur</div>
    </blockquote>
  </div>
</body>
</html>
